<template>
    <el-dialog :model-value="dialogVisible" title="添加订单" width="600" high="800" :before-close="handleClose">
        <span>
            <el-form :model="rowForm" label-width="100px">
                <el-form-item label="报修时间">
                    <el-date-picker v-model="rowForm.date" type="date" placeholder="选择日期" :size="size" />
                </el-form-item>
                <el-form-item label="任务描述">
                    <el-input v-model="rowForm.description"></el-input>
                </el-form-item>
                <el-form-item label="地点">
                    <el-input v-model="rowForm.position"></el-input>
                </el-form-item>
                <el-form-item label="报修人名字">
                    <el-input v-model="rowForm.name"></el-input>
                </el-form-item>
                <el-form-item label="报修人电话">
                    <el-input v-model="rowForm.phone"></el-input>
                </el-form-item>
            </el-form>
        </span>
        <div style="text-align: right; margin-top: 20px;">
            <el-button type="primary" @click="comitForm">
                提交
            </el-button>
            <el-button @click="handleClose">
                取消
            </el-button>
        </div>

    </el-dialog>
</template>

<script>
import api from '@/api/axiosConfig';
import { ElMessage } from 'element-plus';
import { mapGetters } from 'vuex';

export default {
    computed: {
        ...mapGetters('user', ['getUserId'])
    },
    data() {
        return {
            dialogVisible: false,
            rowForm: {
                name: '',
                phone: '',
                date: '',
                description: '',
                position: '',
            },
        };
    },
    methods: {
        clearInterval() {
            this.rowForm.name = '';
            this.rowForm.phone = '';
            this.rowForm.description = '';
            this.rowForm.position = '';
            this.rowForm.date = '';
        },
        handleClose() {
            this.dialogVisible = false;
            this.clearInterval();
        },
        show() {
            this.dialogVisible = true;
        },
        comitForm() {
            const { name, phone, date, description, position } = this.rowForm;
            if (!name || !phone || !date || !description || !position) {
                ElMessage.error('请填写完整信息');
                return;
            }
            const data = {
                name,
                phone,
                date,
                description,
                position,
                state: '0',
                userId: this.getUserId,
                workerId: null,
                workerphone: null,
                comment: null,
            };
            api.post('/task', data, {
                headers: {
                    'Authorization': `Bearer ${this.$store.getters['token/getToken']}`
                }
            }
            ).then(() => {
                this.handleClose();
                ElMessage.success('提交成功');
                this.$emit('task-added');
            }).catch(() => {
                ElMessage.error('提交失败');
            });
        },
    },
};    
</script>